<template>
  <div class="indicator_center_wrap">
    <div class="search_box">
      <div class="line_1">
        <div class="row_left">
          <div class="title">指标目录</div>
        </div>
        <div class="row_right">
          <el-input v-model="name" placeholder="请输入内容" clearable @keyup.native="inputClick" @clear="inputSearch">
            <template slot="prepend"><i class="el-icon-search" @click="inputSearch"></i></template>
            <template slot="append"><i class="el-icon-arrow-right" @click="inputSearch"></i></template>
          </el-input>
          <el-button class="menu_btn ml-6" icon="el-icon-back" @click="$router.go(-1)">返回指标中心</el-button>
        </div>
      </div>
      <Sort @tab-click="tabClick" />
      <Tag @tag-change="tagChange" />
    </div>
    <div class="content_box">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button
            v-if="row.approveStatus === '2' || !row.approveStatus"
            type="text"
            size="small"
            @click="goApply(row)"
            >申请</el-button
          >
        </template>
        <template slot="approveStatus" slot-scope="{ row }">
          <span style="cursor: pointer" @click="goApplyDetail(row)">
            <span v-if="getStatus(row.approveStatus) === '已授权'">
              <span class="status-dot success"></span>
              {{ getStatus(row.approveStatus) }}
            </span>
            <span v-else>
              <span class="status-dot danger"></span>
              {{ getStatus(row.approveStatus) }}
            </span>
          </span>
        </template>

        <template slot="publishStatus" slot-scope="{ row }">
          <span v-if="row.publishStatus > 0">
            <span class="status-dot success"></span>
            已发布
          </span>
          <span v-else>
            <span class="status-dot danger"></span>
            未发布
          </span>
        </template>
      </avue-crud>
    </div>
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="80%" destroy-on-close>
      <chart-form-detail :detail="true" :current="current" />
    </el-dialog>
    <el-dialog title="申请" :visible.sync="applyDialogVisible" width="80%" destroy-on-close>
      <apply-form :detail="detail" :current="current" @back="onBackClick" />
    </el-dialog>
  </div>
</template>

<script>
import { requestTargetCatalogPage } from '@/api/chart/chart'
import { DATA_TYPE_OPTIONS } from '../chart/indicator-definition.vue'
import ChartFormDetail from '../chart/components/chart-form-detail'
import ApplyForm from '../chart/components/apply-form.vue'
import ListMixin from '@/utils/mixins/list-mixin'
import Sort from '@/components/home/sort.vue'
import Tag from '@/components/home/tag.vue'
import { debounce } from 'lodash'
export default {
  name: 'IndicatorMenu',
  components: { Sort, Tag, ChartFormDetail, ApplyForm },
  mixins: [ListMixin],
  data() {
    return {
      detail: false,
      current: {},
      detailDialogVisible: false,
      applyDialogVisible: false,
      name: '',
      page: {
        page: 1,
        pageSize: 9,
      },
      listApi: requestTargetCatalogPage,
      tableOption: {
        columnBtn: false,
        refreshBtn: false,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        column: [
          {
            label: '指标编码',
            prop: 'code',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
          },
          {
            label: '指标定义',
            prop: 'indexDefine',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '描述',
            prop: 'remark',
            span: 12,
            overHidden: true,
          },
          {
            label: '数值类型',
            prop: 'dataType',
            type: 'select',
            span: 8,
            dicData: DATA_TYPE_OPTIONS,
          },
          {
            label: '责任单位',
            type: 'tree',
            prop: 'company',
            span: 12,
            align: 'center',
            overHidden: true,
            dicUrl: '/api/dept/tree',
            props: {
              label: 'name',
              value: 'deptId',
            },
            dicMethod: 'post',
          },
          {
            label: '责任人',
            type: 'select',
            prop: 'director',
            span: 12,
            align: 'center',
            overHidden: true,

            dicUrl: '/api/user/userGrid/1/999',
            props: {
              label: 'nickName',
              value: 'userId',
            },
            dicMethod: 'post',
            dicFormatter: (res) => res.listObject,
          },
          {
            label: '发布时间',
            prop: 'createdAt',
            span: 24,
            width: 150,
            align: 'center',
          },
          {
            label: '发布状态',
            prop: 'publishStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '未发布', value: 0 },
              { label: '已发布', value: 1 },
            ],
          },
          {
            label: '授权状态',
            prop: 'approveStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '无权限', value: null },
              { label: '已申请', value: '0' },
              { label: '已授权', value: '1' },
              { label: '已驳回', value: '2' },
            ],
          },
        ],
      },
    }
  },
  mounted() {},
  methods: {
    goDetail(row) {
      // this.current = row
      // this.detailDialogVisible = true
      // this.$router.push(`/redirect/charts/${row.id}/view?type=2`)
      console.log('onTitleClick')
      this.$router.push({
        name: 'IndicatorCenterView',
        params: { id: row.id },
        query: { panelId: row.panelId },
      })
    },
    goApply(row) {
      this.detail = false
      this.current = row
      this.applyDialogVisible = true
      // this.$router.push(`/redirect/charts/${row.id}/apply`)
    },
    goApplyDetail(row) {
      if (row.approveStatus === '1' || row.approveStatus === '2') {
        this.detail = true
        this.current = row
        this.applyDialogVisible = true
        // this.$router.push(`/redirect/charts/${row.approveId}/apply-detail`)
      }
    },
    getStatus(status) {
      if (!status) return '无权限'
      else if (status === '0') return '已申请'
      else if (status === '1') return '已授权'
      else if (status === '2') return '已驳回'
    },
    inputClick(event) {
      const keyCode = event.keyCode || event.which
      if (keyCode == 13) {
        this.inputSearch()
      }
    },
    inputSearch() {
      this.searchForm.name = this.name
      this.onRefresh()
    },
    tabClick: debounce(function (tab) {
      this.searchForm.indexType = tab.name
      if (this.searchForm.indexType === '全部') {
        this.searchForm.indexType = ''
      }
      this.onRefresh()
    }, 1000),
    tagChange: debounce(function (tag) {
      this.searchForm.indexLabel = tag.join(',')
      if (this.searchForm.indexLabel === '全部') {
        this.searchForm.indexLabel = ''
      }
      this.onRefresh()
    }, 1000),
    onBackClick() {
      this.applyDialogVisible = false
      this.onRefresh()
    },
  },
}
</script>

<style lang="scss" scoped>
.active {
  color: #7adcd5;
  cursor: pointer;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}
.green {
  background: #67c23a;
}
.red {
  background: red;
}
.grid-content {
  height: 300px;
  background: #ffffff;
  box-shadow: 0px 6px 0px 0px rgba(0, 115, 229, 0.05);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #e4efff;
  margin: 0 0 20px 0;
}
.all_btn {
  width: 100px;
  height: 32px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.09);
}
.indicator_center_wrap {
  // padding: 4px;
  background: #edf1f8;
}
.search_box {
  background: #fff;
  padding: 10px 16px 1px;
  box-shadow: 0px 5px 10px 0px #f1f2fa;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  margin-bottom: 20px;

  ::v-deep .el-input__inner {
    border-right: none;
    border-left: none;
    &:focus {
      border-color: #dcdfe6;
    }
    &:hover {
      border-color: #dcdfe6;
    }
  }
}

.content_box {
  padding: 0 20px;
  background-color: #fff;
  border-radius: 8px;
}
.title {
  width: 140px;
  height: 28px;
  line-height: 28px;
  padding-left: 40px;
  background: #fff url(../../assets/images/indicator.png) no-repeat;
  background-size: contain;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  color: #262626;
}
.line_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.row_left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.row_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

::v-deep .el-input-group__prepend {
  background-color: #fff;
  color: #8c8c8c;
}
::v-deep .el-input-group__append {
  background-color: #fff;
  color: #8c8c8c;
}
.menu_btn {
  width: 142px;
  height: 36px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #0073e5;
  color: #0073e5;
}
</style>
